<template>
	<view class="page-container">
		<view class="status_bar"></view>
		<view style="display: flex; align-items: center; height: 88rpx; position: relative;">
			<image src="/static/indicator-back.png" style="width: 48rpx; height: 48rpx; position: absolute; top: 20rpx; left: 32rpx;" @tap="navBack"></image>
			<view style="font-size: 36rpx; font-weight: 600; flex: 1; text-align: center;">联系我们</view>
		</view>
		
		<view style="padding-left: 32rpx;font-size: 28rpx; color: rgba(51, 51, 51, 1);">反馈内容</view>
		<view class="input-box">
			<textarea v-model="feedbackForm.content" placeholder="我们很想听您的心里话！无论您有什么想法或问题，请随时与我们分享。您的反馈对我们意义重大😊" class="text-area"></textarea>
			
			<view class="image-box">
				<image :src="item" v-for="(item,index) in feedbackForm.images" :key="index" class="image-item"></image>
				<view class="image-item image-upload-box" @tap="selectImage">
					<image src="/static/upload.png" style="width: 48rpx; height: 48rpx;"></image>
				</view>
			</view>
		</view>
		
		<view style="padding-left: 32rpx;font-size: 28rpx; color: rgba(51, 51, 51, 1); margin-top: 48rpx;">您的电子邮箱地址</view>
		<view class="input-item">
			<input v-model="feedbackForm.email" placeholder="请输入有效的电子邮箱地址" style="width: 100%;"/> 
		</view>
		
		<view class="commit-button" :class="[buttonEnabled ? 'enabled' : '']" @tap="commit">提交</view>
	</view>
</template>

<script setup>
	import { reactive, computed} from 'vue'
	import { http } from '@/utils/request'
	import { appName, appVersion } from '@/config/config';
	import { onMounted } from 'vue';
	import { onLoad,onShow } from "@dcloudio/uni-app";
	
	
	const feedbackForm = reactive({
		content: '',
		images: [],
		email: '',
	})
	const buttonEnabled = computed(()=>{
		return feedbackForm.content && feedbackForm.email
	})
	
	
	const navBack = ()=>{
		uni.navigateBack();
	}
	
	
	const selectImage = ()=>{
		if (feedbackForm.images.length >= 5) return;
		uni.chooseImage({
			count: 1,
			success(data) {
				const file = data.tempFilePaths[0];
				http.upload(file).then(resp=>{
					feedbackForm.images.push(resp.url);
				})
			}
		})
	}
	
	const commit = ()=> {
		if (!buttonEnabled) return;
		http.post('/app/feedback/commit', {
			content: feedbackForm.content,
			images: JSON.stringify(feedbackForm.images),
			email: feedbackForm.email
		}).then((resp)=>{
			uni.showToast({
				title: "提交成功", icon: 'none'
			});
			feedbackForm.content = '';
			feedbackForm.images = [];
			feedbackForm.email = '';
		})
	}
	
	
</script>

<style lang="scss" scoped>
	
	.page-container {
		min-height: 500rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%), linear-gradient(90deg, rgba(194, 253, 255, 1) 0%, rgba(228, 252, 182, 1) 100%);
		
	}
	
	.input-box {
		margin: 16rpx 32rpx 0 32rpx;
		background-color: white;
		border-radius: 16rpx;
		box-shadow: 5px 5px 10px  rgba(0, 0, 0, 0.1);
		padding: 32rpx;
		
		.text-area {
			min-height: 64rpx;
			width: 100%;
		}
		
		.image-box {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 32rpx;
			
			.image-item {
				width: 60rpx;
				height: 60rpx;
				border-radius: 16rpx;
				margin-right: 16rpx;
			}
			
			.image-upload-box {
				border: 1px dashed rgba(153, 153, 153, 1);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	.input-item {
		margin: 16rpx 32rpx 0 32rpx;
		background-color: rgba(250, 250, 250, 1);
		border-radius: 16rpx;
		padding: 32rpx;
	}
	
	.commit-button {
		position: fixed;
		bottom: 64rpx;
		left: 32rpx;
		right: 32rpx;
		height: 96rpx;
		border-radius: 16rpx;
		background: rgba(245, 245, 245, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.commit-button.enabled {
		background: linear-gradient(90deg, rgba(177, 242, 201, 1) 0%, rgba(71, 214, 133, 1) 100%);
	}
	
</style>